<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :model="listQuery" ref="filterForm">
        <el-row>
          <el-col :span="5">
            <el-form-item label="状态" class="postInfo-container-item" prop="product_title" >
              <el-select v-model="listQuery.status" placeholder="请选择" clearable class="filter-item" @change="handleFilter">
                <el-option key="key12121" label="全部" value=""  />
                <el-option :key="key" :label="item" :value="key" v-for="(item,key) in statusShow"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </div>

    <el-table ref="dragTable" v-loading="listLoading" :data="moneyList" row-key="id" fit highlight-current-row
              style="width: 100%;margin-top:30px;">
      <el-table-column align="center" label="姓名">
        <template slot-scope="scope">
          {{ scope.row.real_name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="手机号">
        <template slot-scope="scope">
          {{ scope.row.mobile}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="申请金额">
        <template slot-scope="scope">
          {{ scope.row.money}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="手续费">
        <template slot-scope="scope">
          {{ scope.row.service_charge}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="到账金额">
        <template slot-scope="scope">
          {{ scope.row.true_money}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="申请时间">
        <template slot-scope="scope">
          {{ scope.row.create_time}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="提现方式">
        <template slot-scope="scope">
          {{ scope.row.bank_name}}<br>    {{ scope.row.bank_card }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
<!--          <el-button v-if="scope.row.status=='0'" type="success" @click="agree(scope.row,1)">线下转账</el-button>-->
<!--          <el-button v-if="scope.row.status=='0'" type="danger" @click="agree(scope.row,2)">拒绝</el-button>-->
<!--          <span v-if="scope.row.status=='1'" type="default"  >已打款</span>-->
<!--          <span v-if="scope.row.status=='2'" type="default"  >已拒绝</span>-->
          <div v-if="scope.row.status=='0'">
            <el-button type="success" size="mini" @click="agree(scope.row,1)">线下转账</el-button>
            <el-button type="danger" size="mini" @click="agree(scope.row,2)">拒绝</el-button>
          </div>
          <div v-else>
            <span>{{statusShow[scope.row.status]}}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getMoneyWithdraw"/>

  </div>
</template>

<script>
  import waves from '@/directive/waves' // waves directive

  import Pagination from '@/components/Pagination'

  import {getMoneyWithdraw, changeMoneyWithdraw } from '../../api/money'

  const statusShow = {
    '0': '待审核',
    '1': '已打款',
    '2': '已拒绝',
  }
  export default {
    components: { Pagination },
    directives: { waves },

    filters: {
      statusFilter(status) {
        const statusMap = {
          2: 'info',
          1: 'success'
        }
        return statusMap[status] ?? 'danger'
      },
      statusShowFilter(status) {
        return statusShow[status] ?? '无'
      }
    },
    data() {
      return {
        statusShow,
        daterange: [],
        moneyList: [],
        dialogVisible: false,
        dialogType: 'new',
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          status:'',
          limit:20,
        }
      }
    },
    created() {
      this.getMoneyWithdraw()
    },
    methods: {
      async agree(row,status) {
        let message=''
        let notice=''
        if(status==1)
        {
          message='请确定已通过转账等方式结算了该笔提现金额?'
          notice='线下转账'
        }
        if(status==2)
        {
          message='确定拒绝该笔提现金额?'
          notice='拒绝'
        }
        this.$confirm(message, notice, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async() => {
            const res = await changeMoneyWithdraw(row.id,{status:status})
            if(res.code==200)
            {
              this.$message.success('操作成功!')
              this.getMoneyWithdraw()
            }
          })
          .catch(err => {
            console.error(err)
          })

      },
      handleFilter() {
        this.listQuery.page = 1
        this.getMoneyWithdraw()
      },
      async getMoneyWithdraw() {
        this.listLoading = true
        const res = await getMoneyWithdraw(this.listQuery)
        this.moneyList = res.data.data
        this.total = res.data.total
        this.listLoading = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .app-container {
    .roles-table {
      margin-top: 30px;
    }

    .permission-tree {
      margin-bottom: 30px;
    }
  }
</style>
